<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>GEarthExtensions Samples - Draggables</title>
  <script src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBTgHOxFyKCf35LCvsI_n4URElrkIhS9MkSlm_0NZWgrKFkOsnd5rEK0Lg" type="text/javascript"></script>
  <script src="../dist/extensions.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */

var ge = null;
var gex = null;

google.load('earth', '1');

google.setOnLoadCallback(function() {
  google.earth.createInstance('map3d', function(pluginInstance) {
    ge = pluginInstance;
    ge.getWindow().setVisibility(true);
    
    gex = new GEarthExtensions(pluginInstance);
    
    gex.util.lookAt([0, 0], { range: 800000, tilt: 45 });

  }, function() {});
});


/* ]]> */
</script>
</head>
<body>
  <div id="map3d_container" style="width: 500px; height: 500px;">
    <div id="map3d" style="height: 100%"></div>
  </div>
<textarea id="code" style="font-family: monospace; width: 500px; height: 200px;">
gex.dom.clearFeatures();

var pm = gex.dom.addPointPlacemark([0, 0], {
  name: 'Champion',
  icon: {
    stockIcon: 'paddle/blu-circle',
    hotSpot: { left: '50%', bottom: 0 }
  }
});

var draggingStyle = gex.dom.buildStyle({
  icon: {
    stockIcon: 'paddle/red-circle',
    hotSpot: { left: '50%', bottom: 0 }
  }
});

gex.edit.makeDraggable(pm, {
  dropCallback: function() {
    gex.edit.endDraggable(pm);
  },
  draggingStyle: draggingStyle,
  targetScreenOverlay: {
    icon: 'http://maps.google.com/mapfiles/kml/shapes/cross-hairs.png',
    overlayXY: { left: '50%', top: '50%' },
    screenXY: { left: 0, top: 0 },
    size: { width: 32, height: 32 }
  }
});
</textarea><br/>
<input type="button" onclick="eval(document.getElementById('code').value);" value="Run"/>
</body>
</html>
